﻿@using Discussion.Web.Services.Identity
@model TopicViewModel

@{
    ViewData["Title"] = Model.Topic.Title;
}


@section Head{
    <link rel="stylesheet" href="~/lib/source/prism/themes/prism.css" />
    <environment names="Development">
        <link rel="stylesheet" href="~/stylesheets/css/topic-show.css" />
    </environment>
    <environment names="QA,Integration,Staging,Production">
        <link rel="stylesheet" href="~/stylesheets/css/topic-show.min.css" asp-append-version="true" />
    </environment>
}

<div class="row">
    <article class="panel panel-topic-detail col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <header class="topic-meta">
            <h1> @Model.Topic.Title </h1>
            <div>
                <span class="meta-item created-at">
                    发布于 <span class="created-at-time" data-created-at="@Html.Timestamp(Model.Topic.CreatedAtUtc)"></span>
                </span>
                <span class="meta-item author">
                    作者 @Model.Topic.Author.DisplayName
                </span>
                <span class="meta-item view-count">
                    @Model.Topic.ViewCount 次浏览
                </span>
                <span class="meta-item type">
                    @Html.DescribeTopicType(Model.Topic.Type)
                </span>
            </div>
        </header>
        <article class="topic-content">
            @Html.Raw(Model.HtmlContent)
        </article>
    </article>
</div>

@if (Model.Topic.ReplyCount > 0)
{
    <div class="row">
        <div class="panel no-padding panel-topic-replies col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="panel-heading">
                共有 @Model.Topic.ReplyCount 条回复
            </div>

            <div class="panel-body">
                @foreach (var reply in Model.Replies)
                {
                    <div class="reply-item">
                        <dl class="reply-author">
                            <dd>@reply.Author.DisplayName</dd>
                        </dl>
                        <div class="reply-content">
                            <div class="reply-content-body">@reply.Content</div>
                            <div class="reply-content-related">
                                回复于 <span class="replied-at" data-replied-at="@Html.Timestamp(reply.CreatedAtUtc)"></span>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
}

@if (User.IsAuthenticated())
{
    <div class="row">
        <div class="panel no-padding panel-topic-create-reply col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="panel-heading">
                添加回复
            </div>

            <div class="panel-body">
                <textarea id="content-editor" placeholder="回复话题"></textarea>
                <button id="submit-create" class="btn btn-default submit-create-btn">回复</button>
            </div>
        </div>
    </div>
}


@section Tail{
    <script src="~/lib/source/prism/prism.js"></script>
    <script src="~/scripts/functions.js"></script>
    <script>
        $(document).ready(function() {
            window.DiscussionApp.utils.transformTimestampOn('.created-at-time', 'data-created-at');
            window.DiscussionApp.utils.transformTimestampOn('.replied-at', 'data-replied-at');
        });

        $("#submit-create").on("click",
            function() {
                var editor = $("#content-editor");
                var replyContent = editor.val();
                if (!$.trim(replyContent)) {
                    editor.focus();
                    return false;
                }

                var topicId = parseInt('@Model.Id');
                var postUrl = '/topics/' + topicId + '/replies';
                $.ajax({
                    url: postUrl,
                    method: 'POST',
                    data: { content: replyContent },
                    // contentType: 'json',
                    dataType: 'json',
                    success: function() {
                        location.reload();
                    },
                    error: function(xhr) {
                        var errors = JSON.parse(xhr.responseText);
                        // Object.values(errors);  // [], [], []
                    }
                });
            });
    </script>
}